<template>
	<view >
		<repair-info :detail="detail" :repairDetail="repairDetail" :id="id" ref="repairRef">
			<view slot="selectDealerName" v-if="jyRepair&&detail.state===0">
				<!-- 选择故障处理人 -->
				<view class="py-2 pl-20 position-relative line-h">
					<view class="position-absolute font-md" style="left:20upx;">
						<text class="text-danger">*</text>处理结果：
					</view>
					<view class="d-flex">
					  <view class="mr-1" @click="selectDealResult(1)"><text class="iconfont text-danger" :class="formData.dealResult===1?'icon-danxuankuangxuanzhong':'icon-danxuankuang1'"></text>自修</view>
					  <view class="mr-1" @click="selectDealResult(2)"><text class="iconfont text-danger" :class="formData.dealResult===2?'icon-danxuankuangxuanzhong':'icon-danxuankuang1'"></text>派修</view>
					  <view class="" @click="selectDealResult(3)"><text class="iconfont text-danger" :class="formData.dealResult===3?'icon-danxuankuangxuanzhong':'icon-danxuankuang1'"></text>已处理</view>
					</view>
				</view>
				<!-- 选择故障处理人 -->
				<view class="py-2 pl-20 position-relative line-h" v-if="formData.dealResult!==3">
					<view class="position-absolute font-md" style="top:40upx;left:20upx;">
					<text class="text-danger">*</text>故障处理人：
					</view>
					<view>
						<input class="border p-2 w-100 d-block line-h border-box input-defind rounded"
						 :class="focusClass.dealerName ? 'input-border-color' : ''"
						placeholder-class="text-light-muted"  disabled
						 @focus="focus('dealerName')" @blur="blur('dealerName')"
						 style="width:508upx"
						@click="showMulLinkageThreePicker" placeholder="请选择故障处理人"
						:value="formData.dealerName"/>
						<definde-picker :range="repairPersonnel" :themeColor="themeColor" typeName="name"
						ref="mpvueCityPicker" :pickerValueDefault="pickerValue" @onConfirm="onConfirm"></definde-picker>
					</view>
				</view>
				<!-- 备注 -->
				<view class="py-2 pl-20 position-relative line-h">
					<view class="position-absolute font-md" style="left:20upx;">
						<text class="text-danger">*</text>备注：
					</view>
					<view>
						<textarea class="border p-2  d-block rounded font-md"
							placeholder-class="text-light-muted" placeholder="请输入备注"
							:class="focusClass.dealRemark ? 'input-border-color' : ''"
							@input="inputEvent($event,'dealRemark')"
							@focus="focus('dealRemark')" @blur="blur($event,'dealRemark')" auto-height
							:value="formData.dealRemark" style="width:468upx"/>
					</view>
				</view>
				<view class="p-2">
					<view class="main-bg-color text-white rounded mt-4 font-md text-center py-2" hover-class="main-bg-hover-color" @click="submit">提交</view>
				</view>
			</view>
		</repair-info>
		
		
		
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	import defindePicker from '@/components/defindePicker/defindePicker.vue'
	import repairInfo from "@/components/repairInfo/repairInfo.vue"
	export default {
		components:{
			defindePicker,
			repairInfo
		},
		data() {
			return {
				themeColor: '#ec4d49',
				id:-1,
				detail:{},
				jyRepair: false,
				repairPersonnel:[],
				repairDetail:{},
				formData:{
				    dealRemark:null,
				    dealResult:1,
				    dealer:null,
				    dealerName:''
				},
				focusClass:{
					dealerName:false,
					dealRemark:false
				},
				wechatRepairShow: false,/**是否展示报修单处理详情 */
				dealRepair:false,
				pickerValue:[0]
			}
		},
		onLoad(e){
			this.id = e.id;
			this.jyRepair = uni.getStorageSync('role').findIndex((item,index)=>item.name==='jy_repair')!==-1
			this.getRepaitDetail()
			setTimeout(()=>{
				this.$refs.repairRef.init();
			},600)
		},
		methods: {
			focus(e,key){
				this.focusClass[key] = true
			},
			blur(e,key){
				this.focusClass[key] = false
			},
			inputEvent(e,key){
				switch(key){
					case 'dealRemark':
					this.formData.dealRemark=e.detail.value
					break;
				}
			},
			/**获取报修单详情*/
			getRepaitDetail(){
				let self = this;
				self.$H.get(api.repairDetail+this.id).then(res=>{
					self.detail=res.content;
					self.getRepairPersonnel();
					if(self.detail.dealResult===1){
						self.getSelfRepairDetail();
					}else if(self.detail.dealResult === 2){
						self.getSendRepairDetail();
					}
				})
			},
			/**获取自修详情*/
			getSelfRepairDetail(){
				this.$H.get(api.getSelfRepairDetail+this.id).then(res=>{
					this.repairDetail= res.content
				})
			},
			 /**获取派修详情*/
			 getSendRepairDetail(){
				this.$H.get(api.getSendRepairDetail+this.id).then(res=>{
					this.repairDetail=res.content
				 })
			},
			/**点击选择处理结果 */
			selectDealResult(vlaue){
			    this.formData.dealResult = vlaue;
			    this.formData.dealer = null;
			    this.formData.dealerName = '';
			    this.getRepairPersonnel();
			},
			/**获取故障处理人*/
			getRepairPersonnel(){
				let self= this;
				if(self.formData.dealResult!==3){
					let roleId= this.formData.dealResult===1?3:4;
					self.$H.get(api.repairPersonnel,
					{pid: self.detail.plasmaStationId,
					roleId,}).then(res=>{
						self.repairPersonnel = res.content
						console.log(self.repairPersonnel)
					})
				}
			},
			
			showMulLinkageThreePicker(){
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e){
				this.formData.dealer = e.selectedObj.id;
				this.formData.dealerName = e.selectedObj.name;
			},
			submit(){
				let self = this;
				if(self.formData.dealerName!==''){
					let postData = self.detail
					postData.dealRemark = self.formData.dealRemark;
					postData.dealResult = self.formData.dealResult;
					postData.performer = self.formData.dealer;
					uni.showLoading({
					    title: '数据提交中'
					});
					self.$H.post(api.updateRepair,postData).then(res=>{
						uni.showToast({
							title:'数据提交成功'
						})
						self.getRepaitDetail()
					},error=>{
						
					})
				}else{
					uni.showToast({
						title: '请选择故障处理人',
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style>
</style>
